.progress-container {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  position: relative;
  overflow: visible;
}

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: 10px;
  transition: width 0.3s ease-in-out;
  position: relative;
}

.progress-bar.animate {
  transition: width 0.3s ease-in-out;
}

.progress-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.progress-text.outside {
  color: #333 !important;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}

@keyframes overflow-shine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.progress-bar.overflow {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: overflow-shine 2s linear infinite;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--progress-color-rgb), 0.3);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(var(--progress-color-rgb), 0);
  }
}

.progress-bar.overflow {
  animation: ripple 1.5s ease-out infinite;
}
